<template>
    <div class="backContainer">
        <div class="topBackground">
            <img src="/src/assets/img/games/indexTopBackground.webp" alt=""/>
            <div class="gameSlogan">
                <h1>GAMES</h1>
                <p>Brawl, Battle, Boom, Clans, Farm!</p>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped>
.backContainer {
    position: relative;
}

.topBackground img {
    height: 70vh;
    width: 100%;
    object-fit: cover;
}

.gameSlogan {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: black;
}

.topBackground h1 {
    font-size: 66px;
    margin-bottom: 20px;
}

.topBackground p {
    font-size: 26px;
    margin-bottom: 24px;
}
</style>